<template>
  <div class="nav-filters" @scroll.stop>
    <div class="nav-head" @touchmove.stop>
      <div class="nav-items">
        <div
          v-for="(item, i) in navData"
          :key="i"
          :class="['nav-item', {'active': curType===item.value}]"
          @click.stop="seleckClickHandle(i,item)"
        >{{ item.name }}</div>
      </div>
    </div>
    <div class="order-list-page">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'NavFilter',
  components: {},
  props: {},
  data() {
    return {
      selectedIndex: 0,
      curType: 'confirm',
      navData: [
        { name: '待确认价格订单', value: 'confirm' },
        { name: '所有订单', value: 'all' }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.$on('next', this.next)
    this.$on('prev', this.prev)
  },
  // 方法集合
  methods: {
    seleckClickHandle(i, item) {
      if (this.selectedIndex === i) return

      this.selectedIndex = i
      this.curType = item.value
      this.$emit('change', {
        type: this.curType
      })
    },
    // 切换一级导航
    prev() {
      let index = this.selectedIndex + 1
      if (index >= this.navData.length) {
        index = 0
      }
      this.seleckClickHandle(index, this.navData[index])
    },
    next() {
      let index = this.selectedIndex - 1
      if (index < 0) {
        index = this.navData.length - 1
      }
      this.seleckClickHandle(index, this.navData[index])
    }
  }
}
</script>
<style lang='less' scoped>
  .nav-filters{
    position: relative;
    padding-bottom: 6px;
    .nav-head{
      position: fixed;
      top:122px;
      left: 0;
      width: 100%;
      z-index: 99;
      background: #FFFFFF;
      // box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.07);
    }
    .nav-items{
      position: relative;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .nav-item{
        position: relative;
        height: 44px;
        padding: 0 15px;
        line-height: 44px;
        font-size: 16px;
        color: #B5B7C4;
        font-weight: 600;
        white-space: nowrap;
        &.active{
          color: #3C4458;
          &::after{
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 20px;
            height: 4px;
            background: #16BC83;
            border-radius: 2px;
          }
        }
      }
    }
  }

  .order-list-page{
    flex: 1;
    margin-top: 126px;
    padding-top: 16px;
    box-sizing: border-box;
    position: relative;
    min-height: 50vh;
    box-sizing: border-box;
    .page-list{
      padding:0 16px;
    }
    .c-list-scroll{
      min-height: calc(100vh - 142px - 46px - 80px);
      box-sizing: border-box;
    }
    /deep/.page-slide-list{
      padding: 0 16px;
    }
  }
</style>
